<script setup lang="ts">
import { inject } from 'vue';

import { BankOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

import { applyRefundApi, cancelRefundApi } from '#/api';
import { bird } from '#/base';

import CopyItem from './components/copyItem.vue';
import OrderStatus from './components/orderStatus.vue';
import OrderInfo from './components/productInfo/orderInfo.vue';
import SourceInfo from './components/sourceInfo.vue';

const searchForm = inject('tabInfoDatas') as any;
const {
  tableData,
  loading,
  handleSizeChange,
  handleCurrentChange,
  page,
  getList,
} = searchForm;

const columns = [
  {
    title: '店铺商品信息',
    dataIndex: 'aftersaleTypeName',
    key: 'shopPrdInfo',
    width: 350,

    // customRender() {
    //   return {
    //     props: {
    //       colSpan: 6,
    //     },
    //   };
    // },
    customCell() {
      return {
        style: {
          padding: '5px 0px',
          border: 'none',
          // 透明背景

          background: '#F1F3F6',
        },
        colSpan: 6,
      };
    },
  },
  {
    title: '退款金额',
    dataIndex: 'dyAmountStr',
    key: 'shopAsStatus',
    width: 200,
    align: 'center',
    customCell() {
      return {
        colSpan: 0,
      };
    },
  },
  {
    title: '售后状态',
    dataIndex: 'shouhouStatus',
    key: 'shouhouStatus',
    align: 'center',
    width: 200,
    customCell() {
      return {
        colSpan: 0,
      };
    },
  },
  {
    title: '货源商品信息',
    dataIndex: 'huoyuaninfo',
    key: 'huoyuaninfo',
    width: 350,
    customCell() {
      return {
        colSpan: 0,
      };
    },
  },
  {
    title: '货源售后状态',
    dataIndex: 'shopName',
    key: 'hyAsStatus',
    width: 300,
    customCell() {
      return {
        colSpan: 0,
      };
    },
  },
  {
    title: '操作',
    dataIndex: 'tbId',
    key: 'action',
    fixed: 'right',
    customCell() {
      return {
        colSpan: 0,
      };
    },
  },
];
const chearColumns = [
  {
    title: '店铺商品信息',
    dataIndex: 'code',
    key: 'shopPrdInfo2',
    fixed: 'left',
    align: 'left',
    colSpan: 6,
    width: 350,
  },
  {
    title: '退款金额',
    dataIndex: 'dyAmountStr',
    key: 'dyAmountStr',
    align: 'center',
    colSpan: 0,
    width: 200,
  },
  {
    title: '售后状态',
    dataIndex: 'shouhouStatus',
    key: 'shouhouStatus',
    align: 'center',
    colSpan: 0,
    width: 200,
  },
  {
    title: '货源商品信息',
    dataIndex: 'itemNum',
    key: 'hyPrdInfo',
    colSpan: 0,
    width: 350,
  },
  {
    title: '货源售后状态',
    dataIndex: 'goodsPrice',
    key: 'hyAsStatus',
    width: 300,
    colSpan: 0,
  },
  {
    title: '操作',
    dataIndex: 'tbId',
    key: 'action',
    colSpan: 0,
    fixed: 'right',
  },
];
function clickContent(type: number, content: string) {
  switch (type) {
    case 1: {
      open(`https://fxg.jinritemai.com/ffa/morder/order/detail?id=${content}`);
      break;
    }
    case 2: {
      open(
        `https://fxg.jinritemai.com/ffa/maftersale/aftersale/detail-v2?type=1&aftersale_id=${content}`,
      );
      break;
    }
    case 3: {
      open(
        `https://im.jinritemai.com/pc_seller_v2/main/workspace?fromOrder=${content}`,
      );
      break;
    }
    default: {
      break;
    }
  }
}

function applyRefundApiFn(item: any) {
  item.loding = true;
  applyRefundApi({ tbId: item.tbId })
    .then(() => {
      message.success('申请成功');
      getList && getList();
    })
    .finally(() => {
      item.loding = false;
    });
}

function cancelRefundApiFn(item: any) {
  item.loding = true;
  cancelRefundApi({ tbId: item.tbId })
    .then(() => {
      message.success('取消成功');
      getList && getList();
    })
    .finally(() => {
      item.loding = false;
    });
}
</script>

<template>
  <div class="pt-4">
    <!-- :components="{
        body: {
          wrapper: 'tbody',
          row: 'tr',
          cell: 'td',
        },
      }" -->
    <a-table
      :columns="columns"
      :data-source="tableData"
      :indent-size="0"
      :loading="loading"
      :pagination="{
        total: page.total,
        pageSize: page.pageSize,
        showSizeChanger: true,
        current: page.page,
        class: 'pr-14',

        pageSizeOptions: page.pageSizes,
        showTotal: (total: any, range: any) =>
          `${range[0]}-${range[1]} 总 ${total} 条`,
      }"
      @change="
        (da: any) => {
          // console.log('change', da, size);
          if (da.pageSize !== page.pageSize) {
            handleSizeChange(da.pageSize);
            return;
          }
          handleCurrentChange(da.current);
        }
      "
    >
      <!-- <template #expandColumnTitle>0 </template> -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'shopPrdInfo'">
          <div>
            <a-table
              :columns="chearColumns"
              :data-source="record.skuList"
              :indent-size="1"
              :pagination="false"
              size="small"
              style="border-radius: 3px"
            >
              <template #bodyCell="{ column: columnsas }">
                <template v-if="columnsas.key === 'shopPrdInfo2'">
                  <OrderInfo :order-info="record" />
                </template>
                <template v-if="columnsas.key === 'dyAmountStr'">
                  售后退款 ¥{{ record.dyAmountStr }}
                </template>
                <template v-if="columnsas.key === 'hyPrdInfo'">
                  <SourceInfo :order-info="record" />
                </template>
                <template v-if="columnsas.key === 'hyAsStatus'">
                  <OrderStatus :order-info="record" />
                </template>
                <template v-if="columnsas.key === 'shouhouStatus'">
                  {{ record.aftersaleStatusName || '/' }}
                </template>
                <template v-if="columnsas.key === 'action'">
                  <a-button
                    v-if="columnsas.aftersaleType && !columnsas.aliRefundId"
                    :loading="record.loding"
                    type="primary"
                    @click="applyRefundApiFn(record)"
                  >
                    退货退款
                  </a-button>
                  <a-button
                    v-if="columnsas.aliRefundId"
                    :loading="record.loding"
                    type="primary"
                    @click="cancelRefundApiFn(record)"
                  >
                    取消退货退款
                  </a-button>
                </template>
              </template>
              <template #headerCell>
                <a-space class="w-full justify-between">
                  <a-space>
                    <a-tag color="orange">
                      <BankOutlined /> {{ record.shopName }}
                    </a-tag>
                    <CopyItem
                      v-if="record.dyOrderId"
                      :content="record.dyOrderId"
                      title="订单编号:"
                      @click-content="() => clickContent(1, record.dyOrderId)"
                    />
                    <CopyItem
                      v-if="record.backOrder"
                      :content="record.backOrder?.backOrderId"
                      title="售后编号:"
                      @click-content="
                        () => clickContent(2, record.backOrder?.backOrderId)
                      "
                    />
                    <a-space>
                      <div>申请售后时间:</div>
                      <div>{{ record.createTime }}</div>
                    </a-space>
                    <a-space v-if="record.aftersaleTypeName">
                      <a-tag color="blue">
                        {{ record.aftersaleTypeName }}
                      </a-tag>
                    </a-space>
                  </a-space>
                  <a-space>
                    <a-space
                      class="cursor-pointer"
                      @click="() => clickContent(3, record.dyOrderId)"
                    >
                      <img :src="bird" alt="飞鸽" />
                      <div v-if="record.purchaseName">
                        {{ record.purchaseName }}
                      </div>
                    </a-space>
                  </a-space>
                </a-space>
              </template>
              <template #footer>
                <a-space>
                  <div>售后原因：{{ record.dyReasonCodeName }}</div>
                </a-space>
              </template>
            </a-table>
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>
